<template>
    <div class="content">
        <div class="mask" v-if="!state">
            <button @click="login">登录</button>
        </div>
        <div v-else>
            <h4>页面C</h4>
            <div>{{ result }}</div>
            <button @click="logout">退出登录</button>
            <button @click="backB">before</button>
            <button @click="submit">submit</button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from '@/store';

const router = useRouter();
const result = ref(null);
const mainStore = useStore();
const state = ref(false);// 登录状态

const backB = () => {
    router.push('/pageB');
}

const login = () => {
    state.value = true;
}

const logout = () => {
    state.value = false;
}

const submit = () => {
    // 提交接口，页面展示提交结果
    result.value = mainStore.input1 + mainStore.input2;

}
</script>

<style lang="scss" scoped>
.content {
    height: 100vh;
    overflow: hidden;
    margin-top: -80px;
    .mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    padding-top: 80px;
}
}

</style>